<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-v2.0.3.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
    <style>
        .router-link-active{
            font-size: 20px;
            color:#f60;
        }
    </style>
</head>
<body>
<div id="box">
    <div>
        <router-link to="/home">主页</router-link>
        <router-link to="/user">新闻</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
<script>
    var Home={
        template:'<h3>我是主页</h3>'
    };
    var User={
        template:`
            <div>
             <h3>我是用户信息</h3>
            <ul>
                <li><router-link to="/user/strive/age/10">Strive</router-link></li>
                <li><router-link to="/user/Blue/age/80">Blue</router-link></li>
                <li><router-link to="/user/eric/age/70">Eric</router-link></li>
            </ul>
            <div>
            <router-view></router-view>
            </div>
            </div>
        `
    };
    var UserDetail={
        template:'<div>{{$route.params}}</div>'
    };
    //配置路由
    const routes=[
        {path:'/home',component:Home},
        {
            path:'/user',
            component:User,
            children:[//核心
                {path:":username/age/:age",component:UserDetail}
            ]
        },
        {path:'*',redirect:'/home'}

    ];
    //生成路由实例
    const router=new VueRouter({routes});
    //左最后挂到Vue
    new Vue({
        router:router,
        el:"#box"
    })
</script>
</body>
</html>